<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../css/layui.css" rel="stylesheet" media="all">
	</head>
	<body>
	<div class="demoTable" id="yc-find">
		<label>商品名</label>
		<div class="layui-input-inline">
			<input type="text" name="gname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"/>
		</div>
		<button type="button" class="layui-btn layui-btn-warm" id="do_search" >查询</button>
	</div>
	<div class="layui-row" id="updateTest" style="display:none;" >
		<div class="layui-col-md10">
			<form class="layui-form layui-from-pane" lay-filter="edit" action="" style="margin-top:20px" >
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">商品名</label>
						<div class="layui-input-inline">
							<input type="text" name="gname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">商品类型</label>
						<div class="layui-input-inline">
							<input type="text" name="tno"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">价格</label>
						<div class="layui-input-inline">
							<input type="text" name="price" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">简介</label>
						<div class="layui-input-inline">
							<input type="text" name="intro" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">库存</label>
						<div class="layui-input-inline">
							<input type="text" name="balance" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">图片</label>
						<div class="layui-input-inline">
							<input type="text" name="pics" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">单位</label>
						<div class="layui-input-inline">
							<input type="text" name="unit" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">保质期</label>
						<div class="layui-input-inline">
							<input type="text" name="qperied" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">净重</label>
						<div class="layui-input-inline">
							<input type="text" name="weight" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">详细</label>
						<div class="layui-input-inline">
							<input type="text" name="descr" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" class="layui-btn" id="add_btn" lay-submit lay-filter="demo11">提交修改</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>

			</form>
		</div>
	</div>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
		<div class="layui-clear-space">
			<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
		</div>
	</script>
	<script type="text/html" id="imageTpl">
		<img src="../../{{ d.pics }}" alt="图片" style="max-width: 50px; max-height: 50px;">
	</script>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script src="../js/layui.js" charset="utf-8"></script>
	<script src="../js/axios.js"></script>
     <script>
		 layui.use(['table','form'],function() {
			 var table = layui.table;
			 var form=layui.form;

			 table.render({
				 elem: '#test',
				 url: '../../good?op=findPage01',
				 toolbar: 'default',
				 title: '商品信息表',
				 cellMinWidth: 120,
				 id: 'test',
				 page: true,
				 page: {limits: [3, 5, 7]},
				 cols: [[
					 {type: 'checkbox', fixed: 'center'},
					 {field: 'gno', title: '商品编号', fixed: 'center', unresize: true, sort: true, align: 'center'},
					 {field: 'gname', title: '商品名称', fixed: 'center', align: 'center'},
					 {field: 'tname', title: '商品类型', fixed: 'center', align: 'center'},
					 {field: 'price', title: '价格', fixed: 'center', align: 'center'},
					 {field: 'intro', title: '简介', fixed: 'center', align: 'center'},
					 {field: 'balance', title: '库存', fixed: 'center', align: 'center'},
					 {field: 'pics', title: '图片', fixed: 'center', align: 'center',templet: '#imageTpl'},
					 {field: 'unit', title: '单位', fixed: 'center', align: 'center'},
					 {field: 'qperied', title: '保质期', fixed: 'center', align: 'center'},
					 {field: 'weight', title: '净重', fixed: 'center', align: 'center'},
					 {field: 'descr', title: '详细', fixed: 'center', align: 'center'},
					 {field: 'aa', title: '操作', templet: "#barDemo"}

				 ]]
			 });
			 table.on('toolbar(test)',function(obj){
				 var checkStatus=table.checkStatus(obj.config.id),data=checkStatus.data;
				 switch(obj.event){
					 case 'add':
						 layer.msg('添加');
						 break;
					 case 'update':
						 console.log(data);
						 break;
					 case 'delete':
						 layer.confirm('数据一但删除不可恢复，您确定删除吗？',{icon:3,title:'确认'},function(index){
							 var arr =[];
							 for(var i = 0; i<data.length;i++){
								 arr.push(data[i].id);
							 }
							 console.log(arr);
							 layer.close(index);
							 table.reload('test',{
								 where:{id:1002,status:2},
								 page: {
									 curr:1
								 }
							 });
						 })
						 break;

				 }
			 });
			 table.on('tool',function (obj) {
				 var data=obj.data;
				 console.log(obj);
				 if (obj.event=='edit'){  layer.open({
					 //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
					 id:'update',
					 type: 1,
					 title: "修改商品信息",
					 area: ['50%', '90%'],
					 content: $("#updateTest"),//引用的弹出层的页面层的方式加载修改界面表单

					 success: function (msg) {
						 console.log(msg);

						 //表单数据回显
						 form.val("edit",data);
					 },

				 });
					 setGoods(obj,data);
				 }else if (obj.event=='del'){
					 axios.get("../../good", {
						 params: {
							 op: 'del',
							 gno:data.gno
						 },

					 }).then(rs => {
						 if(rs.data>0){
							 alert("删除成功");
							 table.reload('test',{  //表格重载，刷新数据 test是数据表格的id
								 url:'../../good?op=findPage01',
								 page: {
									 curr:1
								 }
							 });
						 }else {
							 alert('删除失败!!');
							 console.log(rs.data);
						 }
					 });


					 alert('确定删除？');
				 }
			 })

			 $('#do_search').on('click', function () {
				 // 搜索条件
				 var name = $('#yc-find input[name="gname"]').val();
				 console.log(name);
				 table.reload('test', {
					 method: 'post', where: {
						 gname: name
					 }
					 , page: {
						 curr: 1
					 }
				 });


			 });

			 function setGoods(obj,data) {
				 form.on('submit(demo11)', function (massage) {
					 $.ajax({
						 url: '../../good?op=update',
						 type: 'POST',
						 data: {
							 gno:data.gno,
							 gname: massage.field.gname,
							 tno: massage.field.tno,
							 price: massage.field.price,
							 intro: massage.field.intro,
							 balance :massage.field.balance,
							 pics :massage.field.pics,
							 unit :massage.field.unit,
							 qperied :massage.field.qperied,
							 weight :massage.field.weight,
							 descr :massage.field.descr
						 },
						 success: function (msg) {
							 console.log(msg)
							 if (msg == "1"){
								 alert("修改成功");
								 layer.close('update');
								 table.reload('test',{  //表格重载，刷新数据 test是数据表格的id
									 url:'../../good?op=findPage01',
									 page: {
										 curr:1
									 }
								 });
							 }

						 }
					 });
				 });
			 }
		 });



	 </script>

	</body>

</html>